import React from "react";
import { Form, NavBar, Button, Input } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import request from "../../utils/request";

function Reg() {
    const Navigat = useNavigate();

    const onFinish = async (values) => {
        const data2 = await request.post("/user/check", values);
        if (data2.data.code === 200) {
            const data = request.post("/user/reg", values);
            alert("用户添加成功");
            Navigat("/My");
        } else {
            alert("用户已存在");
        }
    };

    return (
        <div
            className="box"
            style={{
                paddingTop: "45px",

                zIndex: "-1",
            }}
        >
            <NavBar
                onBack={() => {
                    Navigat("/my");
                }}
                className="Navigation"
            >
                注册
            </NavBar>
            <Form
                onFinish={onFinish}
                footer={
                    <Button block type="submit" color="primary" size="large">
                        注册
                    </Button>
                }
            >
                <Form.Item name="username" label="用户名" rules={[{ required: true, message: "用户名不能为空" }]}>
                    <Input placeholder="请输入用户名" />
                </Form.Item>
                <Form.Item name="password" label="密码" rules={[{ required: true, message: "密码不能为空" }]}>
                    <Input placeholder="请输入密码" />
                </Form.Item>
            </Form>
            <Button
                color="primary"
                fill="none"
                onClick={() => {
                    Navigat("/login");
                }}
            >
                以有账号？去登录
            </Button>
        </div>
    );
}

export default Reg;
